<template>
  <div class="auth-container">
    <h1>{{ title }}</h1>
    <div v-if="showLoginForm">
      <LoginForm @switch-to-register="showRegisterForm" />
    </div>
    <div v-else>
      <RegisterForm @switch-to-login="showLoginForm" />
    </div>
  </div>
</template>

<script>
import Login from './LoginMain.vue'
import Register from './Register.vue'

export default {
  components: {
    Login,
    Register
  },
  data() {
    return {
      showLoginForm: true,
      title: 'Login'
    }
  },
  methods: {
    showRegisterForm() {
      this.showLoginForm = false
      this.title = 'Register'
    },
    showLoginForm() {
      this.showLoginForm = true
      this.title = 'Login'
    }
  }
}
</script>
;

<style scoped>
.auth-container {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
